import { useGameStore } from '../../store/gameStore';

export default function Notifications() {
  const notifications = useGameStore(state => state.ui.notifications);
  const actions = useGameStore(state => state.actions);

  return (
    <div className="fixed top-4 right-4 z-50 space-y-2">
      {notifications.map(notification => (
        <div
          key={notification.id}
          className={`
            px-6 py-4 rounded-lg shadow-lg max-w-sm animate-slide-in
            ${notification.type === 'success' ? 'bg-green-500 text-white' : ''}
            ${notification.type === 'error' ? 'bg-red-500 text-white' : ''}
            ${notification.type === 'warning' ? 'bg-yellow-500 text-white' : ''}
            ${notification.type === 'info' ? 'bg-blue-500 text-white' : ''}
          `}
        >
          <div className="flex items-start justify-between gap-4">
            <p className="flex-1">{notification.message}</p>
            <button
              onClick={() => actions.dismissNotification(notification.id)}
              className="text-white hover:text-gray-200"
            >
              ✕
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}
